<template>
<div>
  <a-tree
    ref="aTreeCheckRef"
    v-model="treeData"
    showCheckbox
    showInput
    :defaultCheckedKeys="[9]"
    :expandOnClickNode="false"
    :showAddTree="false"
    @handleCheckChange="handleCheckChange"
    @handleAddTree="handleAddTree"
    @handleNodeClick="handleNodeClick"
  >
    <template #addTree>
    <el-button type="primary" @click="aTreeCheckRef.handleAddTree()">新增</el-button>
  </template>
  </a-tree>
  <a-dialog v-if="treeDialog" v-model="treeDialog" @handleClose="handleClose">
    <el-input v-model="addTreeValue" placeholder="请输入父节点名称"></el-input>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSure">确定</el-button>
    </template>
  </a-dialog>
</div>
</template>

<script setup lang="ts">
import aTree from "@/components/aTree/index.vue";
import aDialog from '@/components/aDialog'
const aTreeCheckRef = ref();
const treeDialog = ref(false)
const treeData = ref([
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
]);
const addTreeValue = ref('')
function handleNodeClick(data) {
  console.log('-------')
}
function handleCheckChange(data, checked, indeterminate) {
  // console.log(data, checked, indeterminate);
  // console.log("", aTreeCheckRef.value.treeRef.getCheckedNodes());
}

function handleAddTree() {
  // console.log('添加第一层节点')
  treeDialog.value = true
  addTreeValue.value = ''
}
function handleClose() {
  treeDialog.value = false
}

function handleSure() {
  console.log(addTreeValue.value)
  treeDialog.value = false
}
</script>

<style>
</style>